<template>
  <div class="type">
    <!-- <div class="type_full"></div> -->
    <div class="left_type">
      <ViewScroll class="type_left-box">
        <div class="type_left">
          <!-- <div class="type_full"></div> -->
          <type-bar :items="typeList"></type-bar>
        </div>
      </ViewScroll>
    </div>

    <div class="right_type">
      <ViewScroll class="type_right-box">
        <div>
          <!-- <div class="type_full"></div> -->
          <!-- <router-link> -->
              <classification-type :items='mogucdnList'></classification-type>
          <!-- </router-link> -->
          <div class="type-center">
            <ul @click.capture="choose($event)">
              <li
                v-for="(v,i) in lis"
                :key="i"
                :id="`li${i}`"
                :sort.prop='i'
                :class=" li==v?'choosed':''"
                @click.stop
            
              >{{ v }}</li>
            </ul>
          </div>
          <Like :items='miniWallList'></Like>
        </div>
      </ViewScroll>
    </div>
  </div>
</template>
<script>
import ClassificationType from "../components/ClassificationType";
import Like from "../components/Like";
import typeBar from "../components/typeBar";
export default {
  data() {
    return {
      lis: [],
      li: "综合",
      typeList:[],
      mogucdnList:[],
      mogucdnId:3627,
      miniWallkey: 10062603,
      miniWallList:[],
      sort:[]
    };
  },
  watch:{
      mogucdnId:function(){
        this.loadMogucdn();
      },
      miniWallkey:function(){
        this.loadRightData();
      },
      sort:function(){
        this.loadRightData();
      }
  },
  methods: {
    choose(e) {
      this.li = e.target.innerHTML;
      console.log(e);
      this.sort = e.target.sort;
    },
    loadTypeData() {
      this.$api
        .loadForHomeData({
          appPlat: "m",
          pids: "117330"
        })
        .then(data => {

          this.typeList = data[117330].list;

        })
        .catch(error => {
          console.error(error);
        });
    },
    loadMogucdn() {
      this.$api
        .loadMogucdnData({
             appPlat:'m',
             pid:this.mogucdnId

        })
        .then(data => {

          this.mogucdnList = data.list;
          console.log(data);

        })
        .catch(error => {
          console.error(error);
        });
    },
    loadMsg(){
       this.$root.$on("updateMsg",(a,b)=>{
            this.mogucdnId = a;
            this.miniWallkey = b;
       })
    },
    loadRightData(){
       this.$api
        .loadmogujieData({
          fcid: this.miniWallkey,
          page: "2",
          sort: this.sort,
          cKey: "h5-cube"
        })
        .then(success => {
          this.miniWallList=success.wall.docs
        })
        .catch(error => {
          console.error(error);
        });
    },
    loadList(){
        this.$api
        .loadmogujieData({
          
        })
        .then(success => {
         
         for(let i = 0;i<3;i++){

           console.log(success.filter.list[i].sort) 
           this.lis.push(success.filter.list[i].title);
         }
         

        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  components: {
    ClassificationType,
    Like,
    typeBar
  },
  mounted() {
    this.loadTypeData();
    this.loadMogucdn();
    this.loadRightData();
    this.loadList();

  },
  beforeMount() {
      this.loadMsg();
   },
};
</script>
<style lang="less" scoped>
.type_left-box {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0rem;
  right: 0rem;
  // overflow-y: auto;
  overflow: hidden;
}
.type {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 100px;
  .left_type {
    background-color: #efefef;
    width: 20%;
    height: 100%;
    float: left;
    // position: absolute;
    // top:100px;
  }
  .type_right-box {
    width: 80vw;
    // height:100%;
    position: absolute;
    top: 0px;
    bottom: 100px;
    overflow: hidden;
  }

  .right_type {
    width: 80%;
    overflow: hidden;
    .type-center {
      width: 100%;
      height: 100px;
      ul {
        display: flex;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
      }
      ul > li {
        list-style: none;
        width: 30%;
        height: 50px;
        border-right: 1px solid #ccc;
        margin-top: 30px;
      }
      #li2 {
        border: none;
      }
    }
  }
}
.hot_title {
  width: 30%;
}

.choosed {
  color: #f34b70;
}
</style>